<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SOCKET聊天工具</title>
</head>

<body>
    <main>
        <ul id="messageList"></ul>
        <div class="input_msg">
            <input type="text">
            <button>发送</button>
        </div>
    </main>
</body>
<script src="./socket.io.js"></script>
<script>
    (function () {
        var input_msg = document.getElementsByClassName('input_msg')[0]
        var msgList = document.getElementById('messageList')
        var input = input_msg.children[0]
        var btn = input_msg.children[1]
        var socket = io()
        var clickFn = function (e) {
            e.preventDefault()
            socket.emit('chat msg', input.value)
            input.value = ''
        }
        btn.addEventListener('click', clickFn)

        socket.on('chat msg', function (msg) {
            var li = document.createElement('li')
            li.innerText = msg
            msgList.appendChild(li)
            li = null
        })

    })()
</script>

</html>